<template>
  <div class="app-container">
      <div class="filter-container">
        <el-input clearable v-model="search.shopName" placeholder="店铺名称" style="width: 170px;"></el-input>
        <el-input clearable v-model="search.shopPhone" placeholder="电话" style="width: 170px;margin-left:5px;"></el-input>
        <el-select v-model="search.type" clearable placeholder="审核状态" style="width: 130px; margin-left:5px;">
            <el-option 
            v-for="(item,index) in selectOptions.checkState"
            :key="index"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="10%" align="center" label="Logo">
        <template slot-scope="scope">
          <span>
            <!-- <bx-image :src="scope.row.imageConvert"  :width="50" :height="50" :show-delete="false"></bx-image>  -->
            <el-image style="width: 50px; height: 50px" :src="scope.row.logoConvert" :preview-src-list="scope.row.logoPreviews"></el-image>
          </span>
        </template>
      </el-table-column>

      <el-table-column  min-width="10%" align="center" label="名称">
        <template slot-scope="scope">
          <span>{{ scope.row.shopName }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="登录账户">
        <template slot-scope="scope">
          <div>{{ scope.row.nickName }}</div>
          <div>{{ scope.row.phone }}</div>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="机构电话">
        <template slot-scope="scope">
          <span>{{ scope.row.shopPhone }}</span>
        </template>
      </el-table-column>
      

      <el-table-column  min-width="20%" label="展示图片">
        <template slot-scope="scope">
            <span v-for="(item,index) in scope.row.pictrues" :key="index">
                <el-image style="width: 50px; height: 50px" :src="item.src" :preview-src-list="scope.row.pictruePreviews"></el-image>
            </span>
        </template>
      </el-table-column>
      <el-table-column  min-width="15%" align="center" label="营业执照">
        <template slot-scope="scope">
            <!-- <span><el-image style="width: 30px; height: 30px" :src="scope.row.busLicenseImg" :preview-src-list="[scope.row.busLicenseImg]"></el-image></span> -->
            <span>{{ scope.row.busLicenseNum }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" label="法人">
        <template slot-scope="scope">
            <span>{{scope.row.legalName}}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" label="状态">
        <template slot-scope="scope">
            <el-tag :type="(scope.row.type?'success':'info')" effect="dark">{{ (scope.row.type?'已审核':'未审核') }}  </el-tag>
        </template>
      </el-table-column>
      
      <el-table-column  min-width="10%" align="center" label="时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作"  min-width="20%">
        <template slot-scope="scope">
          <router-link :to="'/shopmanage/shopdetails/'+scope.row.id">
            <el-button type="primary" size="small">
              查看
            </el-button>
          </router-link>
         
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="getList" />
  </div>
</template>

<script>

import { deepClone,parseTime } from '@/utils'
import * as auth from '@/utils/auth'
import * as courseApi from '@/api/courseinfo'
import * as shopApi from '@/api/shop'
import * as uploadApi from '@/api/upload'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import BxImage from '@/components/BxImage'
import guid from '@/utils/guid'
import * as imageHelper from '@/utils/image'

export default {
  name: 'ShopList',
  components: { Pagination,BxImage },
  data(){
    return{
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        rows: 20,
        type:'-1',
        shopName:'',
        shopPhone:'',
      },
      search:{
        shopName:'',
        shopPhone:'',
        type:''
      },
      selectOptions:{
          checkState:[
              {label:'已审核',value:'1'},
              {label:'未审核',value:'0'},
          ]
      }
    }
  },
  created(){
      var that=this;
      that.getList();
  },
  mounted(){

  },
  methods: {
    getList(){
      var that=this;
      that.listLoading = true;
      shopApi.getShopList(that.listQuery).then(res=>{
         if(res.data){
            that.list=[...res.data.items.map((item,index)=>{
              item._id=index+1;
              item.logoConvert=imageHelper.GetFullUrl(item.shopLogo,200,200);
              item.logoPreviews=[imageHelper.GetFullUrl(item.shopLogo,700,700)];

              item.pictrues=[];
              item.pictruePreviews=[];
              if(item.mainImg1){
                  item.pictrues.push({
                      src:imageHelper.GetFullUrl(item.mainImg1,200,200),
                  })
                  item.pictruePreviews.push(imageHelper.GetFullUrl(item.mainImg1,700,700));
              }
              if(item.mainImg2){
                  item.pictrues.push({
                      src:imageHelper.GetFullUrl(item.mainImg2,200,200),
                  })
                  item.pictruePreviews.push(imageHelper.GetFullUrl(item.mainImg2,700,700));
              }
              if(item.mainImg3){
                  item.pictrues.push({
                      src:imageHelper.GetFullUrl(item.mainImg3,200,200),
                  })
                  item.pictruePreviews.push(imageHelper.GetFullUrl(item.mainImg3,700,700));
              }


              return item;
            })];
            that.total=res.data.total || 0;
            that.listLoading = false;
         }
      })
    },
    searchClick(){
      var that=this;
      that.listQuery.page=1;
      that.listQuery.shopName=that.search.shopName.trim();
      that.listQuery.shopPhone=that.search.shopPhone.trim();
      that.listQuery.type=that.search.type || '-1';
      that.getList();
    },
    showBusLicense(imgSrc){

    }
  }
}
</script>
